<script lang="ts" setup>
import { ref, reactive, toRefs, watch } from "vue" // vue
import { FormInstance, ElMessage } from "element-plus" // elment
import { Search, Refresh, UploadFilled, Folder, Download } from "@element-plus/icons-vue" // 按钮图标
import {
  createwebOrderDataApi,
  updatewebOrderDataApi,
  updatewebOrderDataApiZC,
  getwebOrderDataApi,
  getwebSetApi,
  getwebSetFeeApi,
  downLoadOrder,
  getDetailedApi,
  updateRemark,
  remarkLog,
  getwebSetApiTwo
} from "@/api/webSet/order" // 接口
import { usePagination } from "@/hooks/usePagination" // 分页器
import { useUserStore } from "@/store/modules/user" // 用户信息
import { formatDateTime } from "@/utils" // 时间转换
import { shortcuts } from "@/utils/dateSet"
import { useCascaderAreaData } from "@vant/area-data" // 地址
import { checkPhoneNumber, checkID, checkName, isAddressDetailed } from "@/utils/validate" // 身份证校验
// 缓存
defineOptions({
  name: "WebList"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination() // 分页器
const userStore = useUserStore() // 用户信息
const areaoptions = useCascaderAreaData() // 地址
const props = {
  multiple: false,
  checkStrictly: true,
  label: "text",
  value: "text"
} // 地址
// 表单
const data = reactive<any>({
  formData: {
    orderSource: "",
    totalFeeZJ: []
  },
  searchData: {
    id: undefined, // 订单id
    orderId: undefined, // 订单外部ID
    orderSource: undefined, // 订单来源店铺
    orderWantWant: undefined, // 旺旺号
    orderCardId: undefined, // 身份证号
    orderCardName: undefined, //   办理姓名
    orderPhone: undefined, // 联系电话
    webId: undefined, // 产品名称
    mentorPhone: undefined, // 安装师傅电话
    state: undefined, // 订单状态
    // commissionState: undefined, // 结佣状态
    isJs: undefined, // 结算状态
    superName: undefined, // 上级名称
    iccId: undefined, // 外部触点单号
    createTime: "", // 创建时间
    createBy: "", // 录单员
    stateTime: "", // 变更时间
    operator: "", // 运营商
    dyId: "", // 抖音直播间ID
    orderAddress: "" // 归属省份
  },
  // 表单验证
  rules: {
    orderId: [{ required: true, trigger: "blur", message: "请输入" }],
    // orderWantWant: [{ required: true, trigger: "blur", message: "请输入" }],
    orderCardId: [{ required: true, validator: checkID, trigger: "blur" }],
    // orderNote: [{ required: true, trigger: "blur", message: "请输入" }],
    orderCardName: [{ required: true, validator: checkName, trigger: "blur" }],
    orderAddress: [{ required: true, validator: isAddressDetailed, trigger: "blur" }],
    orderPhone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
    // handleMobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
    webId: [{ required: true, trigger: "change", message: "请输入" }],
    isMentor: [{ required: true, trigger: "blur", message: "请输入" }],
    dyId: [{ required: true, trigger: "blur", message: "请选择抖音直播间" }],
    money: [{ required: true, trigger: "blur", message: "请输入" }]
  }
})

const { searchData, formData, rules } = toRefs(data)
// #region 查
const tableData = ref<any>([])
function tablelist() {
  if (!searchData.value.createTime) {
    searchData.value.createTime = []
  }
  if (!searchData.value.stateTime) {
    searchData.value.stateTime = []
  }
  getwebOrderDataApi({
    ...searchData.value,
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    end: new Date(searchData.value.createTime[1]).getTime() || "", // 时间
    start2: new Date(searchData.value.stateTime[0]).getTime() || "", // 时间
    end2: new Date(searchData.value.stateTime[1]).getTime() || "" // 时间
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    })
    .catch(() => {
      tableData.value = []
    })
}
tablelist()
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  tablelist()
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  searchData.value.state = ""
  handleSearch()
}
// #endregion

// #region 添加和修改框
const dialogVisible = ref(false)
const dialogVisibleXQ = ref(false) // 查看详情
const formRef = ref<FormInstance | null>(null)
const ids = ref(undefined) // 判断修改还是增加
const ck = ref("") // 判断是否查看
// 新增
const XZorder = () => {
  dialogVisible.value = true
  const name1 = userStore.nickName ? userStore.username : userStore.nickName
  formData.value.orderSource = userStore.teamName ? userStore.teamName : name1
}
// 修改
const handleUpdate = (row: any) => {
  ids.value = row.id
  ck.value = "修改"
  dialogVisible.value = true
  // formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  getDetailedApi({
    id: ids.value
  }).then((res: any) => {
    formData.value = res.data
    formData.value.var2 = formData.value.var2.split(",")
    // #region 图片相关
    res.data.photo = res.data.photo
      ?.split(",")
      .map((item: any) => {
        return item.split("/image/")[1]
      })
      .join()
    if (res.data.photo) {
      console.log(res.data.photo, 99)
      // 如果最后一个是逗号删除
      fileList1.value = res.data.photo
        .replace(/,$/, "")
        ?.split(",")
        .map((item: any) => {
          return {
            url: `http://fansitexitong.cn/image/${item}`
            // url: item
            // url: `http://192.168.1.8:8080/image/${item}`
          }
        })
    }

    // #endregion 截止图片相关

    // 根据区域拿套餐
    getwebSetApi({ area: formData.value.var2.join(",") }).then((res: any) => {
      webIdList.value = res.data.list
    })
    // 获取套餐数组金额
    getwebSetFeeApi({ id: row.webId }).then((res: any) => {
      console.log(res, "获取套餐数组金额")
      webIdListZJ.value = res.data
    })
  })
}
// 再次提交
const handleUpdateZC = (row: any) => {
  ids.value = row.id
  ck.value = "再次"
  dialogVisible.value = true
  getDetailedApi({
    id: ids.value
  }).then((res: any) => {
    formData.value = res.data
    formData.value.var2 = formData.value.var2.split(",")

    // #region 图片相关
    res.data.photo = res.data.photo
      ?.split(",")
      .map((item: any) => {
        return item.split("/image/")[1]
      })
      .join()
    if (res.data.photo) {
      console.log(res.data.photo, 99)
      // 如果最后一个是逗号删除
      fileList1.value = res.data.photo
        .replace(/,$/, "")
        ?.split(",")
        .map((item: any) => {
          return {
            url: `http://fansitexitong.cn/image/${item}`
            // url: item
            // url: `http://192.168.1.8:8080/image/${item}`
          }
        })
    }

    // #endregion 截止图片相关

    // 根据区域拿套餐
    getwebSetApi({ area: formData.value.var2.join(",") }).then((res: any) => {
      webIdList.value = res.data.list
    })
  })
  // 获取套餐数组金额
  getwebSetFeeApi({ id: row.webId }).then((res: any) => {
    console.log(res, "获取套餐数组金额")
    webIdListZJ.value = res.data
  })
  // formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
}
// 查看详情
const handleCK = (row: any) => {
  ck.value = "查看"
  ids.value = row.id
  console.log(row, 888)
  dialogVisibleXQ.value = true // 查看详情弹框
  formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  formData.value.var2 = formData.value.var2.split(",")
  if (row.jsTime !== null) {
    formData.value.jsTime = formatDateTime(row.jsTime)
  }
}

/**脱敏操作 */
const handleDecrypt = (flag: any) => {
  getDetailedApi({
    id: ids.value
  }).then((res: any) => {
    if (flag === "orderCardName") {
      formData.value.orderCardName = res.data.orderCardName
    }
    if (flag === "orderCardId") {
      formData.value.orderCardId = res.data.orderCardId
    }
    if (flag === "orderAddress") {
      formData.value.orderAddress = res.data.orderAddress
    }
  })
}

// 清空form框
const clearValidate = () => {
  formRef.value?.resetFields()
}

// 清空对话框
const resetForm = () => {
  ids.value = undefined
  ck.value = ""
  clearValidate()
  formData.value = {}
  webIdList.value = []
  fileList1.value = [] // 图片
  formData.value.totalFeeZJ = []
  webIdListZJ.value = []
}
// 确定按钮
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (ids.value === undefined) {
        createwebOrderDataApi({
          ...formData.value,
          var2: formData.value.var2.join(",")
        }).then(() => {
          ElMessage.success("新增成功")
          dialogVisible.value = false
          tablelist()
        })
      } else if (ck.value == "修改") {
        updatewebOrderDataApi({
          ...formData.value,
          var2: formData.value.var2.join(",")
        }).then(() => {
          ElMessage.success("修改成功")
          dialogVisible.value = false
          tablelist()
        })
      } else if (ck.value == "再次") {
        updatewebOrderDataApiZC({ ...formData.value, var2: formData.value.var2.join(",") }).then(() => {
          ElMessage.success("提交成功")
          dialogVisible.value = false
          tablelist()
        })
      }
    } else {
      return false
    }
  })
}
// #endregion

//  #region 产品名称
const webIdList = ref<any>([])
const webIdListTWo = ref<any>([])
const webIdListZJ = ref<any>([]) // 选择总计
const ChangewebIdList = (i: any) => {
  formData.value.webId = ""
  getwebSetApi({ area: i.join(",") }).then((res: any) => {
    webIdList.value = res.data.list
  })
}
// 遍历套餐获取收取费用

const ChangewebIdListJE = (i: any) => {
  //  清空选择总计框和总计
  formData.value.totalFeeZJ = []
  formData.value.webIdListZJ = []
  formData.value.totalFee = 0
  console.log(i, "套餐id")
  // 获取套餐数组金额
  getwebSetFeeApi({ id: i }).then((res: any) => {
    console.log(res, "获取套餐数组金额")
    webIdListZJ.value = res.data
  })
}

const xuanzezongji = (e: any) => {
  // 将数组字符串数字转数字
  // formData.value.totalFee = e.map(Number)
  // 去除数组中的横线符号并转为数字
  formData.value.totalFee = e.map((item: any) => {
    return Number(item.replace(/[\u4e00-\u9fa5-()A-Za-z]/g, ""))
  })

  console.log(formData.value.totalFee)
  // // 将数组数字相加
  formData.value.totalFee = formData.value.totalFee.reduce(
    (accumulator: any, currentValue: any) => accumulator + currentValue,
    0
  )
}
getwebSetApiTwo().then((res: any) => {
  webIdListTWo.value = res.data.list
})
// 遍历套餐id显示名字
const formatterCombo = (row: any, column: any, celValue: any) => {
  webIdList.value.filter((item: any) => {
    if (item.id == row.webId) {
      celValue = item.name
    }
  })
  webIdListTWo.value.filter((item: any) => {
    if (item.id == row.webId) {
      celValue = item.name
    }
  })
  return celValue
}
// 订单来源根据部门查团队
import { getqueryTeamName } from "@/api/team"
const queryTeamName = ref()
const TeamName = () => {
  getqueryTeamName({}).then((res: any) => {
    queryTeamName.value = res.data
  })
}
TeamName()
// #endregion

// #region 下载
const downLoad = () => {
  downLoadOrder({
    ...searchData.value,
    start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    end: new Date(searchData.value.createTime[1]).getTime() || "", // 时间
    start2: new Date(searchData.value.stateTime[0]).getTime() || "", // 时间
    end2: new Date(searchData.value.stateTime[1]).getTime() || "" // 时间
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "宽带订单.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}
// #endregion

// ****************订单批量修改上传*******************************
import { genFileId } from "element-plus"
import { getToken } from "@/utils/cache/cookies"
const uploadheaders = ref<any>({
  token: getToken()
})
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus"

const upload = ref<UploadInstance>()

const handleExceed: UploadProps["onExceed"] = (files: any) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const updateInfo = ref<any>(null)
const updateSuccInfo = ref<boolean>(false)
const handleSucc = (res: any) => {
  if (res.code == 200) {
    tablelist()
    updateInfo.value = res
    updateSuccInfo.value = true
    // ElMessage.success("成功！")
  } else {
    ElMessage.error(res.message)
  }
}

const submitUpload = () => {
  // loading.value = true
  upload.value!.submit()
}
// *********************订单批量修改结束*************************

// #region 多张图片 上传图片
const fileList1 = ref<any>([]) /**图片列表 */
const headersOpts = {
  token: getToken()
}
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    formData.value.photo = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    formData.value.photo = resfileList
      .map((item: any) => {
        return item.response?.data.split("/image/")[1]
          ? item.response?.data.split("/image/")[1]
          : item.url.split("/image/")[1]
      })
      .join(",")
  }
}
// 多张图片 移除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles, 180)
  formData.value.photo = uploadFiles
    .map((item: any) => {
      return item.response?.data.split("/image/")[1]
        ? item.response?.data.split("/image/")[1]
        : item.url.split("/image/")[1]
    })
    .join(",")
}
// 放大查看图片
const dialogImageUrl = ref("")
const dialogVisible2 = ref(false)
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible2.value = true
}
// #endregion

/**抖音直播间ID获取 */
import { getDyLive } from "@/api/order"
const dyLive = ref<any>([])
const getDy = () => {
  getDyLive({
    page: 1,
    size: 100
  })
    .then((res) => {
      dyLive.value = res.data.map((item: any) => {
        return {
          dyName: `${item.dyId}-${item.dyName}`,
          dyId: item.dyId
        }
      })
    })
    .catch(() => {
      dyLive.value = []
    })
}
getDy()

// #region 备注
const dialogVisibleBZ = ref(false)
const dialogVisibleWork = ref(false)
const tableWork = ref<any>([])
const formDataBZ = reactive<any>({
  id: "",
  remark: ""
})
const handleUpdateBZ = (row: any) => {
  dialogVisibleBZ.value = true
  formDataBZ.id = row.id
  formDataBZ.remark = row.remark
}
const handleCreateBZ = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      updateRemark({
        id: formDataBZ.id,
        remark: formDataBZ.remark
      }).then((res) => {
        console.log(res, "成功")
        dialogVisibleBZ.value = false
        ElMessage.success("修改成功！")
        tablelist()
      })
    } else {
      return false
    }
  })
}
// 查看日志备注
const handleremarkLog = (row: any) => {
  dialogVisibleWork.value = true
  remarkLog({
    page: 1,
    size: 100000,
    orderId: row.id
  }).then((res: any) => {
    console.log(res, "工单日志")
    tableWork.value = res.data
  })
}
// #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], tablelist, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="id" label="订单id">
              <el-input v-model.trim="searchData.id" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderId" label="订单外部ID">
              <el-input v-model.trim="searchData.orderId" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="iccId" label="外部触点单号">
              <el-input v-model.trim="searchData.iccId" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item
              v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
              prop="superName"
              label="上级名称"
            >
              <el-input v-model.trim="searchData.superName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderSource" label="订单来源店铺" v-if="!userStore.teamName">
              <el-select
                v-model="searchData.orderSource"
                clearable
                filterable
                placeholder="请选择订单来源"
                style="width: 240px"
              >
                <el-option v-for="item in queryTeamName" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="orderWantWant" label="旺旺号">
              <el-input v-model.trim="searchData.orderWantWant" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="createBy" label="录单员">
              <el-input v-model.trim="searchData.createBy" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderCardName" label="办理姓名">
              <el-input v-model.trim="searchData.orderCardName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderCardId" label="身份证号码">
              <el-input v-model.trim="searchData.orderCardId" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderPhone" label="联系电话">
              <el-input v-model.trim="searchData.orderPhone" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="dyId" label="抖音直播间">
              <el-select v-model="searchData.dyId" clearable filterable placeholder="请选择" style="width: 240px">
                <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
              </el-select>
            </el-form-item>
            <el-form-item prop="webId" label="宽带产品名称">
              <el-select v-model="searchData.webId" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in webIdListTWo"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :class="item.state == '下架' ? 'Xjstate' : ''"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="mentorPhone" label="安装师傅电话">
              <el-input v-model.trim="searchData.mentorPhone" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="state" label="订单状态">
              <el-select v-model="searchData.state" clearable placeholder="请选择">
                <el-option :key="1" label="未提交" value="未提交" />
                <el-option :key="2" label="处理中" value="处理中" />
                <el-option :key="3" label="安装中" value="安装中" />
                <el-option :key="4" label="已完成" value="已完成" />
                <el-option :key="5" label="安装失败" value="安装失败" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item prop="commissionState" label="结佣状态">
              <el-select v-model="searchData.commissionState" clearable placeholder="请选择">
                <el-option :key="1" label="已结佣" value="已结佣" />
                <el-option :key="2" label="未结佣" value="未结佣" />
              </el-select>
            </el-form-item> -->

            <el-form-item prop="isJs" label="结算状态">
              <el-select v-model="searchData.isJs" clearable placeholder="请选择">
                <el-option :key="1" label="已结算" value="已结算" />
                <el-option :key="2" label="未结算" value="未结算" />
              </el-select>
            </el-form-item>
            <el-form-item prop="createTime" label="创建时间">
              <el-date-picker
                v-model="searchData.createTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="orderAddress" label="归属省份">
              <el-input v-model.trim="searchData.orderAddress" clearable placeholder="请输入" />
            </el-form-item>

            <el-form-item prop="operator" label="运营商">
              <el-select v-model="searchData.operator" clearable placeholder="请选择">
                <el-option label="移动" value="移动" />
                <el-option label="联通" value="联通" />
                <el-option label="电信" value="电信" />
                <el-option label="广电" value="广电" />
                <el-option label="全国" value="全国" />
              </el-select>
            </el-form-item>
            <el-form-item prop="stateTime" label="变更时间">
              <el-date-picker
                v-model="searchData.stateTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
              <el-button @click="XZorder">新增订单</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px">
      <div class="toolbar-wrapper">
        <div>
          <!-- <el-button type="primary" :icon="CirclePlus" @click="handleAdd">添加订单</el-button> -->
          <!-- <el-button type="danger" :icon="UploadFilled">批量上传</el-button> -->
          <el-upload
            ref="upload"
            class="upload-demo"
            action="api/webOrder/batchUpdate"
            :limit="1"
            :headers="uploadheaders"
            :on-exceed="handleExceed"
            :on-success="handleSucc"
            :auto-upload="false"
            style="display: inline-block; vertical-align: top; margin-left: 10px"
            v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          >
            <template #trigger>
              <el-button type="danger" :icon="Folder">选择文件</el-button>
            </template>
            <el-button
              style="vertical-align: top"
              class="ml-3"
              type="success"
              :icon="UploadFilled"
              @click="submitUpload"
              v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
            >
              批量修改
            </el-button>
          </el-upload>

          <el-link
            type="primary"
            :icon="Download"
            style="margin-left: 50px; vertical-align: -webkit-baseline-middle"
            href="api/webOrder/down/downTemplate"
            Download
            v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
            >下载模版</el-link
          >
        </div>
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="downLoad" />
          </el-tooltip>
        </div>
      </div>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="订单id" align="center" width="70" />
        <el-table-column prop="createTime" label="创建时间" align="center" width="70">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="stateTime" label="状态更新时间" align="center" width="70">
          <template #default="scope">
            <span v-if="scope.row.stateTime !== null"> {{ formatDateTime(scope.row.stateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单外部ID" align="center" width="70" />
        <el-table-column prop="iccId" label="外部触点单号" align="center" width="70" />
        <!-- <el-table-column
          v-if="userStore.roles[0] !== '子账户超级管理员'"
          prop="orderWantWant"
          label="旺旺号"
          align="center"
          width="70"
        /> -->
        <el-table-column prop="orderSource" label="订单来源店铺" align="center" width="70" />
        <el-table-column prop="createBy" label="录单员" align="center" width="70" />
        <!-- <el-table-column prop="orderNote" label="备注" align="center" width="70" /> -->
        <el-table-column prop="remark" label="备注" align="center" width="100">
          <template #default="scope">
            <div class="container">
              <el-text v-if="scope.row.remark !== null" @click="handleUpdateBZ(scope.row)" class="mx-1" type="primary">
                <el-tooltip :content="scope.row.remark" placement="top">
                  {{ scope.row.remark }}
                </el-tooltip>
              </el-text>
              <el-text v-if="!scope.row.remark" @click="handleUpdateBZ(scope.row)" class="mx-1" type="primary">
                添加备注
              </el-text>
            </div>
            <br />
            <div>
              <el-button
                v-if="scope.row.remark"
                type="primary"
                text
                bg
                size="small"
                @click="handleremarkLog(scope.row)"
              >
                修改日志</el-button
              >
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="webId" label="宽带产品ID" align="center" width="70" /> -->
        <el-table-column prop="webId" label="宽带产品名称" :formatter="formatterCombo" align="center" width="70" />
        <el-table-column prop="orderCardName" label="办理姓名" align="center" width="70" />
        <!-- <el-table-column prop="handleMobile" label="入网号" align="center" width="70" /> -->
        <el-table-column prop="orderCardId" label="身份证号码" align="center" width="70" />
        <el-table-column prop="orderAddress" label="地址" align="center" width="70" />
        <el-table-column prop="orderPhone" label="联系电话" align="center" width="70" />
        <el-table-column prop="money" label="付款金额" align="center" width="70" />
        <!-- <el-table-column prop="isMentor" label="需要师傅代收款" align="center" width="70" /> -->
        <el-table-column prop="state" label="订单状态" align="center" width="70">
          <template #default="scope">
            <el-text v-if="scope.row.state == '未提交'" type="primary">未提交 </el-text>
            <el-text v-if="scope.row.state == '处理中'" type="warning">处理中 </el-text>
            <el-text v-if="scope.row.state == '安装中'" type="warning">安装中 </el-text>
            <el-text v-if="scope.row.state == '已完成'" type="success">已完成 </el-text>
            <el-text v-if="scope.row.state == '安装失败'" type="danger">安装失败 </el-text>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="commissionState" label="结佣状态" align="center" width="70">
          <template #default="scope">
            <el-text v-if="scope.row.commissionState == '未结佣'" type="warning">未结佣 </el-text>
            <el-text v-if="scope.row.commissionState == '已结佣'" type="success">已结佣 </el-text>
          </template>
        </el-table-column> -->
        <el-table-column prop="isJs" label="结算状态" align="center" width="70">
          <template #default="scope">
            <el-text v-if="scope.row.isJs == '未结算'" type="warning">未结算 </el-text>
            <el-text v-if="scope.row.isJs == '已结算'" type="success">已结算 </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果描述" align="center" width="70" />
        <el-table-column prop="updateTime" label="变更时间" align="center" width="70">
          <template #default="scope">
            <el-text v-if="scope.row.updateTime !== null"> {{ formatDateTime(scope.row.updateTime) }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="mentorPhone" label="安装师傅电话" align="center" width="70" />
        <el-table-column prop="mentorNote" label="安装情况备注" align="center" width="70" />
        <el-table-column
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          prop="superName"
          label="上级名称"
          align="center"
          width="70"
        />
        <el-table-column prop="reName" label="下级代理名称" align="center" width="70" />
        <el-table-column prop="followCondition" label="支撑部跟进情况" align="center" width="70" />
        <el-table-column label="奖励备注" align="center" width="70">
          <template #default="scope">
            {{ scope.row.awardRemark1 }}
            {{ scope.row.awardRemark2 }}
            {{ scope.row.awardRemark3 }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <el-button
              v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
              type="primary"
              text
              bg
              size="small"
              @click="handleUpdate(scope.row)"
              >修改订单</el-button
            >
            <br />
            <el-button
              v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
              type="primary"
              text
              bg
              size="small"
              @click="handleUpdateZC(scope.row)"
              >再次提交</el-button
            >
            <br />
            <el-button type="primary" text bg size="small" @click="handleCK(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增、修改、再次 -->
    <el-dialog v-model="dialogVisible" @closed="resetForm" width="70%">
      <el-form ref="formRef" :model="formData" label-width="120px" label-position="left" :rules="rules">
        <el-form-item prop="orderId" label="订单外部ID">
          <el-input v-model="formData.orderId" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="orderWantWant" label="旺旺号">
          <el-input v-model="formData.orderWantWant" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="orderSource" label="订单来源店铺">
          <el-input v-model="formData.orderSource" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item
          prop="dyId"
          label="抖音直播间"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-select v-model="formData.dyId" clearable filterable placeholder="请选择" style="width: 240px">
            <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
          </el-select>
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <el-input v-model="formData.remark" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="handleMobile" label="入网号">
          <el-input v-model="formData.handleMobile" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="var2" label="可安装区域">
          <!--    -->
          <el-cascader
            size="large"
            :disabled="ck === '再次'"
            placeholder="可输入地址快速查询"
            :props="props"
            :options="areaoptions"
            v-model="formData.var2"
            :filterable="true"
            @change="ChangewebIdList"
          />
        </el-form-item>
        <el-form-item prop="webId" label="宽带产品名称">
          <!-- :disabled="ids !== undefined" -->
          <el-select
            :disabled="ck === '再次'"
            v-model="formData.webId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px"
            @change="ChangewebIdListJE"
          >
            <el-option
              v-for="item in webIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.state == '下架'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收取费用选项" prop="totalFeeZJ">
          <el-select
            v-model="formData.totalFeeZJ"
            :disabled="ck === '再次'"
            multiple
            @change="xuanzezongji"
            style="width: 240px"
          >
            <el-option v-for="item in webIdListZJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="totalFee" label="总计">
          <el-input v-model="formData.totalFee" style="width: 240px" disabled />
        </el-form-item>

        <el-form-item prop="orderCardName" label="办理姓名">
          <el-input v-model="formData.orderCardName" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="orderCardId" label="身份证号码">
          <el-input v-model="formData.orderCardId" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="orderAddress">
          <template #label>
            <span>地址</span>
            <el-tooltip class="box-item" effect="customized" placement="bottom">
              <template #content>
                地址格式：某某省 某某市 某某区 详细地址<br />
                例如 河南省 焦作市 山阳区 某某小区某某楼503<br />
                格式不正确不予通过
              </template>
              <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
          <el-input
            v-model="formData.orderAddress"
            type="textarea"
            placeholder=" 地址格式：河南省 焦作市 山阳区 某某小区某某楼503"
            :disabled="ck === '再次'"
          />
        </el-form-item>
        <el-form-item prop="orderPhone" label="联系电话">
          <el-input v-if="ids == undefined" v-model="formData.orderPhone" placeholder="请输入" />
          <el-input
            v-else
            v-model="formData.orderPhone"
            placeholder="请输入"
            :disabled="userStore.roles[0] !== '渠道部子账户管理员'"
          />
        </el-form-item>
        <el-form-item prop="money" label="付款金额">
          <el-input v-if="ids == undefined" v-model="formData.money" placeholder="请输入" />
          <el-input
            v-else
            v-model="formData.money"
            placeholder="请输入"
            :disabled="userStore.roles[0] !== '渠道部子账户管理员'"
          />
        </el-form-item>
        <el-form-item prop="isMentor" label="需要师傅代收款">
          <el-select v-if="ids == undefined" v-model="formData.isMentor" clearable placeholder="请选择">
            <el-option :key="1" label="是" value="是" />
            <el-option :key="2" label="否" value="否" />
          </el-select>
          <el-select
            v-else
            v-model="formData.isMentor"
            clearable
            placeholder="请选择"
            :disabled="userStore.roles[0] !== '渠道部子账户管理员'"
          >
            <el-option :key="1" label="是" value="是" />
            <el-option :key="2" label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item prop="awardRemark1" label="奖励备注">
          <el-select
            v-model="formData.awardRemark1"
            clearable
            placeholder="请选择"
            :disabled="ck == '查看' || ck === '再次'"
          >
            <el-option :key="1" label="公司" value="公司" />
            <el-option :key="2" label="店铺" value="店铺" />
          </el-select>
          <el-select
            v-model="formData.awardRemark2"
            placeholder="请选择备注信息"
            :disabled="ck == '查看' || ck === '再次'"
            clearable
          >
            <el-option label="话费补贴" value="话费补贴" />
            <el-option label="礼品价值" value="礼品价值" />
            <el-option label="现金补贴" value="现金补贴" />
          </el-select>
          <el-input
            v-model="formData.awardRemark3"
            placeholder="请输入"
            :disabled="ck == '查看' || ck === '再次'"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item prop="lastNumber" label="机顶盒">
          <el-select v-if="ids == undefined" v-model="formData.lastNumber" clearable placeholder="请选择">
            <el-option :key="1" label="不要" :value="0" />
            <el-option :key="2" label="要" :value="1" />
          </el-select>
          <el-select
            v-else
            v-model="formData.lastNumber"
            clearable
            placeholder="请选择"
            :disabled="userStore.roles[0] !== '渠道部子账户管理员'"
          >
            <el-option :key="1" label="不要" :value="0" />
            <el-option :key="2" label="要" :value="1" />
          </el-select>
        </el-form-item>

        <!-- 多张图片上传 -->
        <el-form-item prop="photo" label="上传图片">
          <el-upload
            :multiple="true"
            v-model:file-list="fileList1"
            action="api/webOrder/image/upload"
            list-type="picture-card"
            :on-remove="handleRemove"
            :headers="headersOpts"
            accept="image/*"
            :on-change="handleChageImg1"
            :on-preview="handlePictureCardPreview"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible2">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>

        <el-form-item v-if="ids !== undefined" prop="state" label="订单状态">
          <el-select v-model="formData.state" clearable placeholder="请选择" :disabled="ck == '查看' || ck === '再次'">
            <el-option :key="1" label="未提交" value="未提交" />
            <el-option :key="2" label="处理中" value="处理中" />
            <el-option :key="3" label="安装中" value="安装中" />
            <el-option :key="4" label="已完成" value="已完成" />
            <el-option :key="5" label="安装失败" value="安装失败" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="ids !== undefined" prop="commissionState" label="结佣状态">
          <el-select
            v-model="formData.commissionState"
            clearable
            placeholder="请选择"
            :disabled="ck == '查看' || ck === '再次'"
          >
            <el-option :key="1" label="已结佣" value="已结佣" />
            <el-option :key="2" label="未结佣" value="未结佣" />
          </el-select>
        </el-form-item> -->
        <el-form-item v-if="ids !== undefined" prop="resultType" label="备注原因分类">
          <el-select
            v-model="formData.resultType"
            clearable
            filterable
            placeholder="请选择"
            :disabled="ck == '查看' || ck === '再次'"
          >
            <el-option :key="1" label="测试单" value="测试单" />
            <el-option :key="2" label="该地区无法安装" value="该地区无法安装" />
            <el-option :key="3" label="用户取消订单" value="用户取消订单" />
            <el-option :key="4" label="无法联系到用户" value="无法联系到用户" />
            <el-option :key="5" label="地址不详" value="地址不详" />
            <el-option :key="6" label="用户信息不正确" value="用户信息不正确" />
            <el-option :key="7" label="重复下单" value="重复下单" />
            <el-option :key="8" label="用户黑名单" value="用户黑名单" />
            <el-option :key="9" label="安装异常" value="安装异常" />
            <el-option :key="10" label="用户信息已存在订单" value="用户信息已存在订单" />
            <el-option :key="11" label="开户失败" value="开户失败" />
            <el-option :key="12" label="年龄超限" value="年龄超限" />
            <el-option :key="13" label="地址原因" value="地址原因" />
            <el-option :key="14" label="订单超时" value="订单超时" />
            <el-option :key="15" label="店铺原因失败" value="店铺原因失败" />
            <el-option :key="16" label="提供信息缺失" value="提供信息缺失" />
            <el-option :key="17" label="套餐已下架" value="套餐已下架" />
            <el-option :key="18" label="用户已安装" value="用户已安装" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="result" label="结果描述">
          <el-input v-model="formData.result" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="mentorPhone" label="安装师傅电话">
          <el-input v-model="formData.mentorPhone" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="mentorNote" label="安装情况备注">
          <el-input v-model="formData.mentorNote" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="webNum" label="宽带账号">
          <el-input v-model="formData.webNum" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>

        <el-form-item
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          prop="commission"
          label="公司佣金"
        >
          <el-input autosize type="textarea" v-model="formData.commission" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          prop="var3"
          label="店铺佣金"
        >
          <el-input v-model="formData.var3" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="isJs" label="结算状态">
          <el-select v-model="formData.isJs" clearable placeholder="请选择" :disabled="ck == '查看' || ck === '再次'">
            <el-option :key="1" label="已结算" value="已结算" />
            <el-option :key="2" label="未结算" value="未结算" />
          </el-select>
        </el-form-item>
        <el-form-item prop="noJsReason" label="不结算原因">
          <el-input v-model="formData.noJsReason" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="jsTime" label="结算时间">
          <!-- <el-input v-model="formData.jsTime" placeholder="请输入" :disabled="ids !== undefined" /> -->
          <el-date-picker
            style="width: 240px"
            v-model="formData.jsTime"
            disabled
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="followCondition" label="支撑部跟进情况">
          <el-input v-model="formData.followCondition" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog v-model="dialogVisibleXQ" @closed="resetForm" width="70%">
      <el-form ref="formRef" :model="formData" label-width="120px" label-position="left" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item prop="orderId" label="订单外部ID">
                <el-input v-model="formData.orderId" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="orderWantWant" label="旺旺号">
                <el-input v-model="formData.orderWantWant" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item label="宽带产品ID">
                <el-input v-model="formData.webId" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="orderSource" label="订单来源店铺">
                <el-input v-model="formData.orderSource" placeholder="请输入" disabled />
              </el-form-item>
              <el-form-item prop="createBy" label="录单员">
                <el-input v-model="formData.createBy" placeholder="请输入" disabled />
              </el-form-item>
              <el-form-item
                prop="dyId"
                label="抖音直播间"
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
              >
                <el-select
                  v-model="formData.dyId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  disabled
                >
                  <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
                </el-select>
              </el-form-item>
              <el-form-item prop="remark" label="备注">
                <el-input v-model="formData.remark" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="handleMobile" label="入网号">
                <el-input v-model="formData.handleMobile" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="var2" label="可安装区域">
                <el-cascader
                  :disabled="ids !== undefined"
                  size="large"
                  placeholder="可输入地址快速查询"
                  :props="props"
                  :options="areaoptions"
                  v-model="formData.var2"
                  :filterable="true"
                  @change="ChangewebIdList"
                />
              </el-form-item>
              <el-form-item v-if="ids == undefined" prop="webId" label="宽带产品名称">
                <el-select
                  v-model="formData.webId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="ids !== undefined"
                >
                  <el-option
                    v-for="item in webIdList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == '下架'"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-else prop="webId" label="宽带产品名称">
                <el-select
                  v-model="formData.webId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="ids !== undefined"
                >
                  <el-option
                    v-for="item in webIdListTWo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == '下架'"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="photo" label="上传图片">
                <el-image
                  v-for="(item, index) in formData.imageList"
                  :key="index"
                  :preview-src-list="formData.imageList"
                  :initial-index="index"
                  style="width: 100px; height: 100px"
                  :src="item"
                  :zoom-rate="1.2"
                  fit="cover"
                />
              </el-form-item> </el-card
          ></el-col>

          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderCardName" label="办理姓名">
                <el-input v-model="formData.orderCardName" placeholder="请输入" :disabled="ids !== undefined" />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderCardName')">办理姓名解密</el-link>
                </div>
              </el-form-item>
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderCardId" label="身份证号码">
                <el-input v-model="formData.orderCardId" placeholder="请输入" :disabled="ids !== undefined" />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderCardId')">身份证姓名解密</el-link>
                </div>
              </el-form-item>
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderAddress">
                <template #label>
                  <span>地址</span>
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content>
                      地址格式：某某省 某某市 某某区 详细地址<br />
                      例如 河南省 焦作市 山阳区 某某小区某某楼503<br />
                      格式不正确不予通过
                    </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                </template>
                <el-input
                  v-model="formData.orderAddress"
                  :disabled="ids !== undefined"
                  type="textarea"
                  placeholder=" 地址格式：河南省 焦作市 山阳区 某某小区某某楼503"
                />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderAddress')">地址解密</el-link>
                </div>
              </el-form-item>
              <el-form-item prop="orderPhone" label="联系电话">
                <el-input v-model="formData.orderPhone" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="money" label="付款金额">
                <el-input v-model="formData.money" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="isMentor" label="需要师傅代收款">
                <el-select v-model="formData.isMentor" clearable placeholder="请选择" :disabled="ids !== undefined">
                  <el-option :key="1" label="是" value="是" />
                  <el-option :key="2" label="否" value="否" />
                </el-select>
              </el-form-item>
              <el-form-item prop="terminal" label="终端类型">
                <el-select v-model="formData.terminal" clearable placeholder="请选择" :disabled="ids !== undefined">
                  <el-option :key="1" label="光猫" value="光猫" />
                  <el-option :key="2" label="FTTR" value="FTTR" />
                </el-select>
              </el-form-item>
              <el-form-item prop="lastNumber" label="机顶盒">
                <el-select v-model="formData.lastNumber" clearable placeholder="请选择" :disabled="ids !== undefined">
                  <el-option :key="1" label="不要" :value="0" />
                  <el-option :key="2" label="要" :value="1" />
                </el-select>
              </el-form-item> </el-card
          ></el-col>
          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item v-if="ids !== undefined" prop="state" label="订单状态">
                <el-select v-model="formData.state" clearable placeholder="请选择" :disabled="ck == '查看'">
                  <el-option :key="1" label="未提交" value="未提交" />
                  <el-option :key="2" label="处理中" value="处理中" />
                  <el-option :key="3" label="安装中" value="安装中" />
                  <el-option :key="4" label="已完成" value="已完成" />
                  <el-option :key="5" label="安装失败" value="安装失败" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item v-if="ids !== undefined" prop="commissionState" label="结佣状态">
                <el-select v-model="formData.commissionState" clearable placeholder="请选择" :disabled="ck == '查看'">
                  <el-option :key="1" label="已结佣" value="已结佣" />
                  <el-option :key="2" label="未结佣" value="未结佣" />
                </el-select>
              </el-form-item> -->
              <el-form-item v-if="ids !== undefined" prop="resultType" label="备注原因分类">
                <el-input v-model="formData.resultType" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="result" label="结果描述">
                <el-input v-model="formData.result" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="mentorPhone" label="安装师傅电话">
                <el-input v-model="formData.mentorPhone" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="mentorNote" label="安装情况备注">
                <el-input v-model="formData.mentorNote" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="webNum" label="宽带账号">
                <el-input v-model="formData.webNum" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
                prop="commission"
                label="公司佣金"
              >
                <el-input
                  autosize
                  type="textarea"
                  v-model="formData.commission"
                  placeholder="请输入"
                  :disabled="ck == '查看'"
                />
              </el-form-item>
              <el-form-item
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
                prop="var3"
                label="店铺佣金"
              >
                <el-input v-model="formData.var3" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="isJs" label="结算状态">
                <el-select v-model="formData.isJs" clearable placeholder="请选择" :disabled="ck == '查看'">
                  <el-option :key="1" label="已结算" value="已结算" />
                  <el-option :key="2" label="未结算" value="未结算" />
                </el-select>
              </el-form-item>
              <el-form-item prop="noJsReason" label="不结算原因">
                <el-input v-model="formData.noJsReason" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item prop="jsTime" label="结算时间">
                <el-input v-model="formData.jsTime" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>

              <el-form-item prop="yearFee" label="包年费">
                <el-input v-model="formData.yearFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="testFee" label="宽带调测费">
                <el-input v-model="formData.testFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="tvFee" label="TV(月费及调测费)">
                <el-input v-model="formData.tvFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="totalFee" label="总金额">
                <el-input v-model="formData.totalFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item> </el-card
          ></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleXQ = false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleXQ = false">确认</el-button>
      </template>
    </el-dialog>
    <!-- 批量修改信息反馈 -->
    <el-dialog v-model="updateSuccInfo" title="修改数据统计" width="50%">
      <div class="pbox">
        <p>1.修改时间：{{ updateInfo.time }}</p>
        <p>2.修改成功：{{ updateInfo.data.success }}</p>
        <p>3.修改失败：{{ updateInfo.data.fail }}</p>
        <p>4.修改用时：{{ updateInfo.data.time }}毫秒</p>
      </div>

      <template #footer>
        <el-button @click="updateSuccInfo = false">取消</el-button>
      </template>
    </el-dialog>
    <!-- 修改备注 -->
    <el-dialog v-model="dialogVisibleBZ" :title="'修改备注'" @close="resetForm" width="30%">
      <el-form ref="formRef" :model="formDataBZ" label-width="100px" label-position="left">
        <el-form-item prop="remark" label="备注">
          <el-input v-model="formDataBZ.remark" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleBZ = false">取消</el-button>
        <el-button type="primary" @click="handleCreateBZ">确认</el-button>
      </template>
    </el-dialog>
    <!-- 备注日志 -->
    <el-dialog v-model="dialogVisibleWork" @close="resetForm">
      <el-scrollbar height="600px">
        <el-table :data="tableWork">
          <el-table-column type="index" label="序号" width="120" align="center">
            <template #default="{ $index }">
              {{ (paginationData.currentPage - 1) * paginationData.pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间" align="center">
            <template #default="scope">
              <text v-if="scope.row.time !== null"> {{ formatDateTime(scope.row.time) }}</text>
            </template>
          </el-table-column>
          <el-table-column prop="old_message" label="旧备注" align="center" />
          <el-table-column prop="new_message" label="新备注" align="center" />
          <el-table-column prop="user_name" label="更改人" align="center" />
        </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.container {
  overflow: hidden; /* 控制内容溢出时如何处理 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
}
.Xjstate {
  color: #afadad;
  /* background: #e7e7e7; */
}
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}
</style>
